<template>
  <div class="m-container">
    <el-divider />

    <div class="c-box">
      <hk-form
        ref="hkFormRef1"
        :form-labels="propData.basicList"
        :rules="propData.formRules"
        :data="formData"
        :dict-list="dictList"
        :btn-hidden="true"
        :label-position="labelPosition"
        @handleEvent="handleEvent">
        <template #filter-assetDepartmentId>
          <treeselect
            v-model="formData.assetDepartmentId"
            :options="dictList.deptList"
            :normalizer="normalizer"
            :append-to-body="true"
            placeholder="请选择责任部门"
            @select="changeOrg" />
        </template>
        <template #filter-assetsChangesAnnexDTPList>
          <el-button size="mini" icon="el-icon-upload2" @click="openLoad()">上传附件</el-button>
          <div class="fa-file">
            <span v-for="item in fileList" :key="item.name" class="son-file">{{ item.name }} <span>,</span> </span>
          </div>
        </template>
        <template #filter-list>
          <div v-if="propData.clear" style="text-align: right">
            <a @click="clearData" style="color: #189dff">一键清除</a>
          </div>
          <hk-table
            ref="hkTable"
            :table-data="propData.selectData"
            :table-columns="propData.tableDataList"
            :show-pag="false"
            :loading="loading"
            :rules="propData.formRules"
            :dict-list="dictList"
            @emitData="emitData"
            :table-height="200"
            is-need-index>
            <!-- 设备IP  -->
            <template #ip="scope">
              <el-input v-model="scope.row.row.ip" maxlength="20" />
            </template>
            <!-- 设备密级  -->
            <template #securityLevel="scope">
              <el-select v-model="scope.row.row.securityLevel" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in dictList.securityList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
            </template>
            <!-- 刻录权限  -->
            <template #burnPermission="scope">
              <el-select v-model="scope.row.row.burnPermission" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in dictList.burnList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
            </template>
            <!-- 使用类型  -->
            <template #usageType="scope">
              <el-select v-model="scope.row.row.usageType" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in dictList.usageTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
            </template>
            <!-- 使用状态  -->
            <template #usageStatus="scope">
              <el-select v-model="scope.row.row.usageStatus" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in dictList.usageList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
            </template>
            <!-- 交换机  -->
            <template #exchange="scope">
              <el-input v-model="scope.row.row.exchange" maxlength="50" />
            </template>
            <!-- 存放位置  -->
            <template #storageLocation="scope">
              <el-input v-model="scope.row.row.storageLocation" maxlength="50" />
            </template>
          </hk-table>
        </template>
      </hk-form>
    </div>
    <el-divider />

    <footer>
      <el-button @click="cancel">取 消</el-button>
      <el-button v-if="title !== '查看'" type="primary" @click="submitForm">保 存</el-button>
    </footer>

    <hk-upload
      ref="import_up"
      :url="url"
      title="导入"
      :multiple="multipleUp"
      :accept="accept"
      success-desc="上传成功"
      @assetup="upSuccess" />
  </div>
</template>
<script>
import HkTable from '@/components/Hk-Table/index.vue'
import HkForm from '@/components/Hk-Form'
import { getDict, userList, dictItemsList } from '@/api/specialProject/asset'
import { treeSelect } from '@/api/specialProject/personnel'
// import { queryUserList } from '@/api/assets/host.js'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Treeselect from '@riophae/vue-treeselect'
export default {
  // eslint-disable-next-line vue/no-unused-components
  components: { HkForm, HkTable, Treeselect },
  props: {
    propData: {
      type: Object,
      default: () => {},
    },
    labelPosition: {
      type: String,
      default: 'left',
    },
  },
  data() {
    return {
      fileList: [],
      title: '新增',
      url: window.baseUrl.action + '/attachment/upload',
      accept: '.pdf,.png,.jpg,.doc,.docx',
      multipleUp: true,
      // 表单数据
      formData: {},

      dictList: {
        usageList: [],
        burnList: [],
        securityList: [],
        userList: [],
        deptList: [],
        usageTypeList: [],
      },
      loading: false,

      otherData: {},
      showT: true,
      id: null,
      deptId: null,
      choseColor: '',
      stagData: {},
      isClear: false,
    }
  },
  created() {
    this.getDicts()

    console.log(this.propData, 's')
  },
  mounted() {
    this.resetForm()
  },
  methods: {
    upSuccess(e) {
      console.log(e, 'fffff')
      this.fileList = e
      this.formData.assetsChangesAnnexDTPList = e

      this.$set(this.formData, 'assetsChangesAnnexDTPList', e)
    },

    // 上传
    openLoad() {
      this.$refs.import_up.show()
    },
    clearData() {
      for (var i = 0; i < this.propData.selectData.length; i++) {
        var item = this.propData.selectData[i]
        for (var k of this.propData.tableDataList) {
          if (k.param !== 'assetCode' && k.param !== 'discardReason') {
            this.$set(item, k.param, null)
          }
        }
      }
      this.isClear = true
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      }
    },
    resetForm() {
      this.$refs.hkFormRef1.clearcheck('formLabels')
    },
    handleEvent(e) {
      console.log(e)
    },
    //  周期
    changeTime(e, item) {
      console.log(e, item, 'eee')
      this.formData.list[item.$index].startTime = e[0]
      this.formData.list[item.$index].endTime = e[1]
    },
    // 字典获取   数组
    getDicts() {
      getDict({ code: 'usageStatus' }).then((res) => {
        this.dictList.usageList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
      getDict({ code: 'deviceStatus' }).then((res) => {
        this.dictList.deviceList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey

          return o
        })
      })
      getDict({ code: 'burnPermission' }).then((res) => {
        this.dictList.burnList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
      getDict({ code: 'securityLevel' }).then((res) => {
        this.dictList.securityList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
      getDict({ code: 'usageType' }).then((res) => {
        this.dictList.usageTypeList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
      // 责任部门
      treeSelect().then((res) => {
        this.dictList.deptList = res
      })
    },
    // 部门change事件
    changeOrg(node) {
      console.log(node, 'ssss')
      if (this.formData.ownerId) {
        this.formData.ownerId = undefined
      }
      this.drawUser(node.id)
    },
    drawUser(id) {
      //   人
      userList({ orgId: id }).then((res) => {
        this.dictList.userList = res.map((o) => {
          o.label = o.name
          o.value = o.id
          return o
        })
      })
    },
    // table 数据
    emitData(e) {
      this.stagData = e
    },
    // 提交事件
    async submitForm() {
      this.$refs.hkTable.subData()
      const params = await this.$refs.hkFormRef1.handleFormSubmit('formLabels')
      console.log(params, this.stagData, this.propData)
      if (this.propData.clear) {
        if (this.isClear === false) {
          this.$message.error('请先一键清除')
          return false
        }
      }

      Object.keys(params).forEach((key) => {
        for (var item of this.stagData) {
          if (key === 'newStorageLocation') {
            item['storageLocation'] = params[key]
          }
          if (key === 'newRepairTime') {
            var val = params[key].join(' 至 ')
            item['repairTime'] = val
          }
          item[key] = params[key]
        }
      })
      for (var k of this.propData.tableDataList) {
        for (var j of this.stagData) {
          if (k.addRedStar) {
            if (!j[k.param]) {
              this.$message.error('请完善表单')
              return false
            }
          }
        }
      }
      this.cancel()
      this.$emit('send', this.stagData)
    },
    cancel() {
      this.$refs.hkFormRef1.clearcheck('formLabels')
      this.close()
    },
    close() {
      this.$emit('close')
    },
  },
}
</script>
  
    <style lang="scss" scoped>
.fa-file {
  max-height: 100px;
  overflow: auto;
  .son-file {
  }
}
#app.dark-theme {
  .m-container,
  .tab-content {
    background: transparent !important;
    color: #fff;
  }
  .tab-bg {
    background: rgba(59, 139, 255, 0.1) !important;
  }
  .sp-flex i {
    color: #4b6eef !important;
  }
  .active {
    border: 1px solid #fff !important;
    transform: scale(1.1, 1.1);
  }
}
.group-top-btn {
  display: flex;
  justify-content: flex-start;
  .group-middle {
    padding: 2px;
    margin: 2px;
    border: 1px solid transparent;
    border-radius: 6px;
    .group-btn {
      width: 30px;
      height: 30px;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
.active {
  border: 1px solid #4b6eef !important;
  transform: scale(1.1, 1.1);
}
.up-txt {
  font-size: 12px;
}
.add-row {
  margin-top: 20px;
}
.m-container {
  padding: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  // display: flex;
  // flex-direction: column;
}
.c-box {
  // background: #fff;
  border-radius: 4px;
  padding: 20px;
  padding-bottom: 0;
}
.el-form {
  flex: 1;
  overflow: auto;
}
footer {
  height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px;
}
::v-deep .el-table__body-wrapper {
  height: 300px;
}
::v-deep {
  .el-button--text {
    padding: 0;
  }

  .el-input-group__append {
    background: transparent;
  }
}
</style>
  
  